<template>
  <div class="outer">
    <div class="inner">
      <!-- 左边 -->
      <div class="leftElement">
      <div class="titleImage"><img :src="playlist.coverImgUrl" alt="fengmian"></div>
      <div class="songSheet">
        <div class="recommendTitle">
          <img src="./images/songsheet.png" alt="songsheet">
          <span>{{playlist.name}}</span>
        </div>
        <div class="recommendUser">
          <img :src="playlist.creator.avatarUrl" alt="userimage">
          <span>{{playlist.creator.nickname}}</span>
          <span>{{handleCreateTime(playlist.createTime)}}创建</span>
        </div>
        <div class="songUI">
            <el-button type="primary" size="small">▶播放</el-button>
            <el-button plain size="small">收藏(3000)</el-button>
            <el-button plain size="small">分享(25)</el-button>
            <el-button plain size="small">下载</el-button>
            <el-button plain size="small">评论(198080)</el-button>
        </div>
        <div class="recommendSongUI">
            <el-button plain size="mini" round v-for="(item,index) in playlist.tags" :key="index">{{item}}</el-button>
        </div>
        <div class="introduce">
          <p v-for="(item,index) in description" :key="index">{{item}}</p>
        </div>
      </div>
    </div>
    <!-- 右边 -->
    <div class="rightElements">
      <div class="similarSongTitle">喜欢这个歌单的人</div>
      <div class="similarSongs">
        <img src="./images/nvsheng.jpg" alt="userImage">
        <img src="./images/nvsheng.jpg" alt="userImage">
        <img src="./images/nvsheng.jpg" alt="userImage">
        <img src="./images/nvsheng.jpg" alt="userImage">
        <img src="./images/nvsheng.jpg" alt="userImage">
        <img src="./images/nvsheng.jpg" alt="userImage">
        <img src="./images/nvsheng.jpg" alt="userImage">
        <img src="./images/nvsheng.jpg" alt="userImage">
      </div>
      <div class="hotsongrecommendation">
        <span class="popularSongList">热门歌单</span>
        <div class="outSongRecommendation">
          <div class="everySong">
            <img src="./images/nvsheng.jpg" alt="songImage">
            <div><span class="hotTopics">当古典音乐遇上另类演绎，妙趣横生</span>
            <p>by:<a href="##">野良兔</a></p></div>
          </div>
          <div class="everySong">
            <img src="./images/nvsheng.jpg" alt="songImage">
            <div><span class="hotTopics">当古典音乐遇上另类演绎，妙趣横生</span>
            <p>by:<a href="##">野良兔</a></p></div>
          </div>
          <div class="everySong">
            <img src="./images/nvsheng.jpg" alt="songImage">
            <div><span class="hotTopics">当古典音乐遇上另类演绎，妙趣横生</span>
            <p>by:<a href="##">野良兔</a></p></div>
          </div>
          <div class="everySong">
            <img src="./images/nvsheng.jpg" alt="songImage">
            <div><span class="hotTopics">当古典音乐遇上另类演绎，妙趣横生</span>
            <p>by:<a href="##">野良兔</a></p></div>
          </div>
          <div class="everySong">
            <img src="./images/nvsheng.jpg" alt="songImage">
            <div><span class="hotTopics">当古典音乐遇上另类演绎，妙趣横生</span>
            <p>by:<a href="##">野良兔</a></p></div>
          </div>
          <div class="everySong">
            <img src="./images/nvsheng.jpg" alt="songImage">
            <div><span class="hotTopics">当古典音乐遇上另类演绎，妙趣横生</span>
            <p>by:<a href="##">野良兔</a></p></div>
          </div>
        </div>
      </div>
      <div>
        <p class="downloadTitle">网易云音乐多端下载</p>
      </div>
      <div class="download">
        <img src="./images/apple.png"></img>
        <img src="./images/windows.png"></img>
        <img src="./images/android.png"></img>
      </div>
      <p class="downloadBottom">同步歌单，随时畅听320k好音乐</p>
    </div>
    </div>
    <!-- 歌曲列表 -->
   <div class="songList">
      <div>
      <div class="songListTitle">
        <p>歌曲列表　{{playlist.tracks.length}}首歌</p>
        <p><a href="##">生成外链播放器</a>　播放：{{playlist.playCount}}次</p>
      </div>
    </div>
    <div class="songForm">
      <el-table
        ref="singleTable"
        :data="tableData"
        highlight-current-row
        @current-change="handleCurrentChange"
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column label=""><template>
            <a href="##">▶</a>
            </template></el-table-column>
        <el-table-column
          property="name"
          label="歌曲标题"
          width="120">
        </el-table-column>
        <el-table-column
          property="dt"
          label="时长"
          width="120">
        </el-table-column>
        <el-table-column
          property="ar[0].name"
          label="歌手">
        </el-table-column>
        <el-table-column
          property="al.name"
          label="专辑">
        </el-table-column>
      </el-table>
    </div>
   </div>
    <div class="middle">
      <span>查看更多内容，请下载客户端</span>
      <el-button type="danger" plain size="small" round>立即下载</el-button>
    </div>
    <Commends class="commends" :ids="songsList.ids" :type="songsList.type"/>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { mapState, mapActions } from 'vuex'
import Commends from '../../components/Commends'
export default {
  name: 'RecommendSongs',
  data() {
    return {
      tableData: [
        {
          title: '城市傍晚',
          time: '04:10',
          songer: '毛不易',
          album: '幼鸟指南'
        },
        {
          title: '城市傍晚',
          time: '04:10',
          songer: '毛不易',
          album: '幼鸟指南'
        },
        {
          title: '城市傍晚',
          time: '04:10',
          songer: '毛不易',
          album: '幼鸟指南'
        },
        {
          title: '城市傍晚',
          time: '04:10',
          songer: '毛不易',
          album: '幼鸟指南'
        },
        {
          title: '城市傍晚',
          time: '04:10',
          songer: '毛不易',
          album: '幼鸟指南'
        },
        {
          title: '城市傍晚',
          time: '04:10',
          songer: '毛不易',
          album: '幼鸟指南'
        },
        {
          title: '城市傍晚',
          time: '04:10',
          songer: '毛不易',
          album: '幼鸟指南'
        },
        {
          title: '城市傍晚',
          time: '04:10',
          songer: '毛不易',
          album: '幼鸟指南'
        },
        {
          title: '城市傍晚',
          time: '04:10',
          songer: '毛不易',
          album: '幼鸟指南'
        },
        {
          title: '城市傍晚',
          time: '04:10',
          songer: '毛不易',
          album: '幼鸟指南'
        }
      ],
      currentRow: null,
      songsList: {
        ids: 2029494007,
        type: 'songList'
      },
      description: []
    }
  },
  computed: {
    ...mapState({
      playlist: (state) => state.recommendsongs.playlist
    })
  },
  components: {
    Commends
  },
  methods: {
    ...mapActions('recommendsongs', ['getRecommendSongs']),
    handleCurrentChange() {},
    handleCreateTime(time) {
      return dayjs(time).format('YYYY-MM-DD')
    }
  },
  async mounted() {
    await this.getRecommendSongs(this.songsList)
    this.description = this.playlist.description.split('\n')
    this.tableData = this.playlist.tracks
    this.playlist.tracks.forEach((item) => {
      item.dt = dayjs(item.dt).format('mm:ss')
    })
  }
}
</script>

<style scoped>
.outer {
  width: 1000px;
  margin: 0 auto;
}
.inner {
  display: flex;
  height: 350px;
}
.leftElement {
  display: flex;
  justify-content: space-around;
  width: 709px;
}
.titleImage img {
  margin: 40px 0;
  width: 208px;
  height: 208px;
}
.recommendTitle {
  line-height: 29px;
  height: 29px;
  font-size: 0;
  margin: 40px 0;
}
.recommendTitle span {
  line-height: 26px;
  height: 26px;
  display: inline-block;
  font-size: 20px;
  vertical-align: middle;
}
.recommendTitle img {
  vertical-align: middle;
}
.songSheet {
  padding-left: 20px;
}
.recommendUser {
  height: 35px;
  margin-bottom: 20px;
}
.recommendUser img {
  height: 35px;
  width: 35px;
  vertical-align: middle;
}
.recommendUser span {
  height: 35px;
  line-height: 35px;
  vertical-align: middle;
  margin-left: 10px;
}
.songUI {
  margin-bottom: 20px;
}
.recommendSongUI {
  margin-bottom: 20px;
}
.introduce {
  height: 75px;
  overflow: hidden;
  color: gray;
}

.rightElements {
  height: 700px;
  width: 270px;
  border: 1px solid #ccc;
  border-bottom: 1px solid transparent;
  border-left: 1px solid transparent;
  padding: 10px 20px;
  padding-top: 20px;
}
.similarSongTitle {
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.similarSongs {
  padding-left: 20px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 30px;
}
.similarSongs img {
  width: 35px;
  height: 35px;
  padding-right: 20px;
}
.downloadTitle {
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
  padding-bottom: 10px;
}
.download {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 20px;
}

.songListTitle {
  display: flex;
  width: 693px;
  justify-content: space-between;
}
.songForm {
  width: 693px;
}
.middle {
  margin-top: 20px;
  width: 693px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.commends {
  width: 693px;
}
.popularSongList {
  display: block;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
}
.everySong {
  display: flex;
  margin-bottom: 10px;
}
.everySong img {
  width: 50px;
  height: 50px;
}
.hotTopics {
  display: block;
  font-size: 14px;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 10px;
}
.hotsongrecommendation {
  margin-bottom: 20px;
}
</style>
